<!-- 系统日志 -->
<template>
    <div class="myuser">
        <div class="usertitle">系统日志信息列表</div>
        <div class="user_1">
            <el-input v-model="input" placeholder="请输入搜索信息" style="width:200px;" />
            <el-select v-model="value" class="m-2" placeholder="全部" style="width:100px ; margin-left: 10px;">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :value="item.value"
                />
            </el-select>
            <el-button type="primary" style="margin-left: 10px;" @click="finddata">查询</el-button>
            <el-button type="primary" style="margin-right: 10px;" @click="finddataa">重置</el-button>
        </div>
        <div class="user_2">
            <SystemLogTable :tableDataa="tableDataa"></SystemLogTable>
        </div>
    </div>
</template>

<script lang="ts">
    import SystemLogTable from "./SystemLogTable.vue";
    import {reactive, ref,defineComponent,onMounted} from "vue";
export default defineComponent({
    components:{SystemLogTable},
    setup() {
        onMounted(()=>{
            window.sessionStorage.setItem("tableDataa",JSON.stringify(tableDataa ))
        })
        let input = ref("");
        let value = ref('')
        let options:Array<{
        value:string
        }> =reactive([
            { value: '日志编号'},
            { value: '模块名称'},
            { value: '用户名'},
            { value: '部门名称'},
            { value: '操作日期'},
            { value: 'IP'},
            { value: '操作功能'},
            { value: '登陆时间'},
            { value: '设备终端名称'},
            { value: '操作状态'},
            { value: '推出时间'},
        ])
        let tableDataa = reactive([
            {id: 1,
            username:"wwm2015",
            staffname:"王文敏",
            sectionname:"研发部",
            modulename:"产品管理",
            IPa:"192.168.0.10",
            logdate:"08-29 10:30",
            functiona:"创建",
            operatedate:"08-29 10:34",
            operatestate:"操作中",
            terminalname:"PC端",
            dropdate:"08-29 11:34",
            },
            {id: 2,
            username:"wwm2015",
            staffname:"张三三",
            sectionname:"研发部",
            modulename:"产品管理",
            IPa:"192.168.0.10",
            logdate:"08-29 10:30",
            functiona:"创建",
            operatedate:"08-29 10:34",
            operatestate:"操作中",
            terminalname:"PC端",
            dropdate:"08-29 11:34",
            },
            {id: 3,
            username:"wwm2015",
            staffname:"李二娃",
            sectionname:"研发部",
            modulename:"产品管理",
            IPa:"192.168.0.10",
            logdate:"08-29 10:30",
            functiona:"创建",
            operatedate:"08-29 10:34",
            operatestate:"操作中",
            terminalname:"PC端",
            dropdate:"08-29 11:34",
            }
        ])
        function finddata(){
            if (input.value !==''){
                let arr:any = reactive([])
                tableDataa.forEach((i)=>{
                let reg = new RegExp(input.value);  //正则
                // console.log(i);
                if(tableDataa[i.id - 1].staffname.match(reg)){
                 console.log(tableDataa[i.id - 1]);  
                arr.push (tableDataa[i.id - 1])
                }
                })
                tableDataa.length = 0
                input.value = ''
                tableDataa.push(...arr)
                console.log(tableDataa);
            }
        }
        function finddataa(){
            let arr:any=  sessionStorage.getItem("tableDataa");
            tableDataa.length = 0
            tableDataa.push(...JSON.parse(arr))
        }
        return{
            options,input,value,tableDataa,finddata,finddataa
        }
    }
})
</script>

<style scoped>
    .myuser {
  width: calc(100% - 40px);
  height: 100%;
}
.usertitle {
  width: calc(100% - 40px);
  height: 100px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}
.user_1 {
  width: calc(100% - 40px);
  height: 50px;
  border-bottom: 1px solid #D7D7D7;
  display: flex;
  align-items: center;
  margin-left:15px
}
.user_2{
    margin-top: 10px;
}
</style>